
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>(゜-゜)つロ 干杯~</title>
	<!-- <link rel="stylesheet" href="css/bootstrap.min.css"> -->
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<link rel="stylesheet" href="./css/style.css">
	<link rel="stylesheet" href="./css/main.css">
	<link rel="stylesheet" href="./css/loading.css">
	<link rel="icon" href="img/logo.png">
	<script src="js/jquery-1.11.1.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<script src="js/global.js"></script>
</head>
<body class="body">
	<div id="back-top"><a href="#gotop" onclick="scrollToTop();return false"></a></div>
	<!-- 头部 begin-->
	<div class="header" id="gotop">
		<div class="nav">
			<nav class="clearfix">
				<div class="navfl fl">
					<ul class="clearfix">
						<!-- <li><img src="img/hdrenwu.png" alt=""></li> -->
						<li><a class="active" href="index.html">首页</a></li>
						<li><a href="./t.html">微语</a></li>
						<li><a href="./photos.html">相册</a></li>
						<li><a href="./login.html">登陆</a></li>
					</ul>
				</div>
				<!-- 左边结束 -->
				<div class="navrt fr">
					<ul class="clearfix">
						<li><img src="img/hdrenwu.png" alt=""> <input type="text" placeholder="点击量top 10"><button onclick="test()"></button></li>
						<li><a href="guestbook.html">留言</a></li>
					</ul>
				</div>
			</nav>
		</div>
		<!-- 头像部分 -->
		<div class="tx">
			<div class="img">
				<a href="javascript:void(0);" title="名字+个人主页"></a>
			</div>
			<!-- 头像部分 -->
			<!-- 微语公告 -->
			<div class="wenzi">
				<h1>Miller's blog</h1>
				<div id="news">
					<ul>
						<li><img src="img/weiyu.png" width="20" alt="">&nbsp;<a href="#" title="公告第一条，这是一个分享公开源码和网络资源，学习交流web前端技术的博客。">公告第一条，这是一个分享公开源码和网络资源，学习交流web前端技术的博客。</a></li>
						<li><img src="img/weiyu.png" width="20" alt="">&nbsp;<a href="#" title="公告第二条，这是一个分享公开源码和网络资源，学习交流web前端技术的博客。">公告第一条，这是二个分享公开源码和网络资源，学习交流web前端技术的博客。</a></li>
						<li><img src="img/weiyu.png" width="20" alt="">&nbsp;<a href="#" title="公告第三条，这是一个分享公开源码和网络资源，学习交流web前端技术的博客。">公告第三条，这是一个分享公开源码和网络资源，学习交流web前端技术的博客。</a></li>
						<li><img src="img/weiyu.png" width="20" alt="">&nbsp;<a href="#" title="公告第四条，这是一个分享公开源码和网络资源，学习交流web前端技术的博客。">公告第四条，这是一个分享公开源码和网络资源，学习交流web前端技术的博客。</a></li>
						<li><img src="img/weiyu.png" width="20" alt="">&nbsp;<a href="#" title="公告第五条，这是一个分享公开源码和网络资源，学习交流web前端技术的博客。">公告第五条，这是一个分享公开源码和网络资源，学习交流web前端技术的博客。</a></li>
						<li><img src="img/weiyu.png" width="20" alt="">&nbsp;<a href="#" title="公告第六条，这是一个分享公开源码和网络资源，学习交流web前端技术的博客。">公告第六条，这是一个分享公开源码和网络资源，学习交流web前端技术的博客。</a></li>
						<li><img src="img/weiyu.png" width="20" alt="">&nbsp;<a href="#" title="公告第七条，这是一个分享公开源码和网络资源，学习交流web前端技术的博客。">公告第七条，这是一个分享公开源码和网络资源，学习交流web前端技术的博客。</a></li>
					</ul>
				</div>
			</div>
			<!-- 微语公告 -->
		</div>
	</div>	
	<!-- 头部 end -->

	<!-- 页面内容 begin -->
	<div class="content">
		<div class="container content-container">
			<div class="row">
				<div class="col-md-9">
					<!-- 轮播图 -->
					<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
						<!-- Indicators -->
						<ol class="carousel-indicators">
							<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
							<li data-target="#carousel-example-generic" data-slide-to="1"></li>
							<li data-target="#carousel-example-generic" data-slide-to="2"></li>
							<li data-target="#carousel-example-generic" data-slide-to="3"></li>
						</ol>

						<!-- Wrapper for slides -->
						<div class="carousel-inner lunbotu" role="listbox">
							<div class="item active">
								<a href="./details.html"><img src="img/side1.jpg" alt="..."></a>
								<span class="sidetitle">《第一篇文章的标题可以很长很长很长可以很长》</span>
							</div>
							<div class="item">
								<a href="./details.html"><img src="img/side1.jpg" alt="..."></a>
								<span class="sidetitle">第二篇文章的标题可以很长很长很长可以很长很长很长可以很长很长很长可以很长很长很长</span>
							</div>
							<div class="item">
								<a href="./details.html"><img src="img/side1.jpg" alt="..."></a>
								<span class="sidetitle">第三篇文章的标题可以很长很长很长可以很长很长很长可以很长很长很长可以很长很长很长</span>
							</div>
							<div class="item">
								<a href="./details.html"><img src="img/side1.jpg" alt="..."></a>
								<span class="sidetitle">第四篇文章的标题可以很长很长很长可以很长很长很长可以很长很长很长可以很长很长很长</span>
							</div>
						</div>

						<!-- Controls -->
						<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
							<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
							<span class="sr-only">Previous</span>
						</a>
						<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
							<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
							<span class="sr-only">Next</span>
						</a>
					</div>
					<!-- 轮播图 -->
					<!-- 首页文章 -->
					<ul class="articles"></ul>
					<!-- 首页文章 -->
					<!-- 文章分页按钮 -->
					<nav class="fybtn" aria-label="...">
						<ul class="pagination">
							<li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
							<li class="active"><a href="#">1 <span class="sr-only"></span></a></li>
							<li><a href="#">2 <span class="sr-only"></span></a></li>
							<li><a href="#">3 <span class="sr-only"></span></a></li>
							<li><a href="#">4 <span class="sr-only"></span></a></li>
							<li><a href="#">5 <span class="sr-only"></span></a></li>
							<li>
							<li><a href="#">...<span class="sr-only"></span></a></li>
							<li>
								<a href="#" aria-label="Next">
									<span aria-hidden="true">&raquo;</span>
								</a>
							</li>
						</ul>
					</nav>
					<!-- 文章分页按钮 -->
				</div>
				<!-- 侧栏 -->
				<div class="col-md-3">
					<div class="widget">
						<h4><span class="glyphicon glyphicon-map-marker"></span>欢迎来访！</h4>
						<div class="iptu"></div>
					</div>
					<div class="widget">
						<h4><span class="glyphicon glyphicon-tasks"></span>分类</h4>
						<ul class="clearfix">
							<li class="duogefl">
								<div>情感文章</div>
								(<a href="javascript:void(0);">心情日志</a>
								<a href="javascript:void(0);">杂记摘抄</a>)
							</li>
							<li class="duogefl">
								<div>技术相关</div>
								(<a href="javascript:void(0);">前端笔记</a>
								<a href="javascript:void(0);">后端技术</a>
								<a href="javascript:void(0);">全栈开发</a>)
							</li>
							<li class="dangefl">
								<div>软件工具</div>
								<div>网站源码</div>
							</li>
							<li class="dangefl">
								<div>影视资源</div>
								<div>音乐分享</div>
							</li>
							<li class="dangefl">
								<div>其他资源</div>
							</li>
						</ul>
					</div>
					<div class="widget">
						<h4><span class="glyphicon glyphicon-th-list"></span>存档</h4>
						<ul class="clearfix">
							<li class="cundang">
								<span class="glyphicon glyphicon-time"></span><div>2018年11月(1)</div>
							</li>
							<li class="cundang">
								<span class="glyphicon glyphicon-time"></span><div>2018年9月(3)</div>
							</li>
							<li class="cundang">
								<span class="glyphicon glyphicon-time"></span><div>2018年4月(2)</div>
							</li>

							<li class="cundang">
								<span class="glyphicon glyphicon-time"></span><div>2018年3月(6)</div>
							</li>
							<li class="cundang">
								<span class="glyphicon glyphicon-time"></span><div>2017年12月(7)</div>
							</li>
							<li class="cundang">
								<span class="glyphicon glyphicon-time"></span><div>2017年11月(7)</div>
							</li>
							<li class="cundang">
								<span class="glyphicon glyphicon-time"></span><div>2017年10月(5)</div>
							</li>
							<li class="cundang">
								<span class="glyphicon glyphicon-time"></span><div>2017年9月(3)</div>
							</li>
							<li class="cundang">
								<span class="glyphicon glyphicon-time"></span><div>2017年8月(6)</div>
							</li>
							<li class="cundang">
								<span class="glyphicon glyphicon-time"></span><div>2017年7月(2)</div>
							</li>
						</ul>
					</div>
					<div class="widget">
						<h4><span class="glyphicon glyphicon-pencil"></span>最新文章</h4>
						<ul class="clearfix hotwz">
							<li class="duogefl">
								<em class="hotone">1</em><a href="javascript:void(0);">你最爱的两家茶饮开杠了！奈雪の茶VS喜茶：隔空掐架，到底谁在“抄袭”？</a>
							</li>
							<li class="duogefl">
								<em class="hottwo">2</em><a href="javascript:void(0);">韩朝将组建联队参加2019年男子手球世锦赛</a>
							</li>
							<li class="duogefl">
								<em class="hotthree">3</em><a href="javascript:void(0);">被指广告数据造假市值跌去三分之一 猎豹移动：将起诉Kochava</a>
							</li>
						</ul>
					</div>
					<div class="widget">
						<h4><span class="glyphicon glyphicon-fire"></span>热门文章</h4>
						<ul class="clearfix hotwz">
							<li class="duogefl">
								<em class="hotone">1</em><a href="javascript:void(0);">你最爱的两家茶饮开杠了！奈雪の茶VS喜茶：隔空掐架，到底谁在“抄袭”？</a>
							</li>
							<li class="duogefl">
								<em class="hottwo">2</em><a href="javascript:void(0);">韩朝将组建联队参加2019年男子手球世锦赛</a>
							</li>
							<li class="duogefl">
								<em class="hotthree">3</em><a href="javascript:void(0);">被指广告数据造假市值跌去三分之一 猎豹移动：将起诉Kochava</a>
							</li>
							<li class="duogefl">
								<em class="hotSoSo">4</em><a href="javascript:void(0);">乌克兰为何冒险挑衅俄罗斯？俄方一针见血指出背后原因</a>
							</li>
							<li class="duogefl">
								<em class="hotSoSo">5</em><a href="javascript:void(0);">俄中学生2019年将首次参加国家统一考试汉语科目考试</a>
							</li>
							<li class="duogefl">
								<em class="hotSoSo">6</em><a href="javascript:void(0);">深圳南山半马乱象：选手集体抄近道，多个号码被套牌</a>
							</li>
						</ul>
					</div>
					<div class="widget">
						<h4><span class="glyphicon glyphicon-random"></span>随机文章</h4>
						<ul class="clearfix hotwz">
							<li class="duogefl">
								<em class="hotone">1</em><a href="javascript:void(0);">你最爱的两家茶饮开杠了！奈雪の茶VS喜茶：隔空掐架，到底谁在“抄袭”？</a>
							</li>
							<li class="duogefl">
								<em class="hottwo">2</em><a href="javascript:void(0);">韩朝将组建联队参加2019年男子手球世锦赛</a>
							</li>
							<li class="duogefl">
								<em class="hotthree">3</em><a href="javascript:void(0);">被指广告数据造假市值跌去三分之一 猎豹移动：将起诉Kochava</a>
							</li>
							<li class="duogefl">
								<em class="hotSoSo">4</em><a href="javascript:void(0);">乌克兰为何冒险挑衅俄罗斯？俄方一针见血指出背后原因</a>
							</li>
							<li class="duogefl">
								<em class="hotSoSo">5</em><a href="javascript:void(0);">俄中学生2019年将首次参加国家统一考试汉语科目考试</a>
							</li>
							<li class="duogefl">
								<em class="hotSoSo">6</em><a href="javascript:void(0);">深圳南山半马乱象：选手集体抄近道，多个号码被套牌</a>
							</li>
						</ul>
					</div>
					<div class="widget">
						<h4><span class="glyphicon glyphicon-comment"></span>最新评论</h4>
						<ul class="zxpl">
							<li>
								<img src="img/default.jpg" alt="">
								<span>匿名游客</span><br>
								<span><i class="glyphicon glyphicon-time"></i>2018年11月28日</span>
								<p><span class="glyphicon glyphicon-triangle-top"></span>这是第一条评论,涛哥好帅噢！</p>
							</li>
							<li>
								<img src="img/default.jpg" alt="">
								<span>匿名游客</span><br>
								<span><i class="glyphicon glyphicon-time"></i>2018年11月28日</span>
								<p><span class="glyphicon glyphicon-triangle-top"></span>这是第二条评论,涛哥好帅噢！涛哥好帅噢！</p>
							</li>
							<li>
								<img src="img/default.jpg" alt="">
								<span>匿名游客</span><br>
								<span><i class="glyphicon glyphicon-time"></i>2018年11月28日</span>
								<p><span class="glyphicon glyphicon-triangle-top"></span>这是第三条评论,涛哥好帅噢！涛哥好帅噢！涛哥好帅噢！</p>
							</li>
							<li>
								<img src="img/default.jpg" alt="">
								<span>匿名游客</span><br>
								<span><i class="glyphicon glyphicon-time"></i>2018年11月28日</span>
								<p><span class="glyphicon glyphicon-triangle-top"></span>这是第四条评论,涛哥好帅噢！涛哥好帅噢！涛哥好帅噢！涛哥好帅噢！涛哥好帅噢！</p>
							</li>
						</ul>
					</div>
					<div class="widget">
						<h4><span class="glyphicon glyphicon-link"></span>友情链接</h4>
						<ul class="link">
							<li><span class="glyphicon glyphicon-link"><a href="javascript:void(0);">百度百科</a>
							</li>
							<li><span class="glyphicon glyphicon-link"><a href="javascript:void(0);">百度知道</a>
							</li>
							<li><span class="glyphicon glyphicon-link"><a href="javascript:void(0);">百度文库</a>
							</li>
							<li><span class="glyphicon glyphicon-link"><a href="javascript:void(0);">虎牙直播</a>
							</li>
							<li><span class="glyphicon glyphicon-link"><a href="javascript:void(0);">熊猫直播</a>
							</li>
							<li><span class="glyphicon glyphicon-link"><a href="javascript:void(0);">今日焦点</a>
							</li>
							<li><span class="glyphicon glyphicon-link"><a href="javascript:void(0);">腾讯视频</a>
							</li>
							<li><span class="glyphicon glyphicon-link"><a href="javascript:void(0);">腾讯游戏</a>
							</li>
							<li><span class="glyphicon glyphicon-link"><a href="javascript:void(0);">中华文库</a>
							</li>
							<li><span class="glyphicon glyphicon-link"><a href="javascript:void(0);">苏宁易购</a>
							</li>
							<li><span class="glyphicon glyphicon-link"><a href="javascript:void(0);">新浪博客</a>
							</li>
							<li><span class="glyphicon glyphicon-link"><a href="javascript:void(0);">搜狐影音</a>
							</li>
							<li><span class="glyphicon glyphicon-link"><a href="javascript:void(0);">哔哩哔哩</a>
							</li>
						</ul>
					</div>
					<div class="widget">
						<h4><span class="glyphicon glyphicon-qrcode"></span>加群交流</h4>
						<div class="qrcode">
							<img src="./img/weixin.jpg" alt="" width="240" height="240">
						</div>
					</div>
					<div class="widget">
						<h4><span class="glyphicon glyphicon-signal"></span>站点统计</h4>
						<div class="zdtj">
							<p>微语数量：11条</p>
							<p>文章数量：225篇</p>
							<p>吐槽数量：572次</p>
							<p>勉强存活：287天</p>
							<p>诞生日期：2018年11月28号</p>
						</div>
					</div>
				</div>
				<!-- 侧栏 -->
			</div>
		</div>
	</div>
	<!-- 页面内容 end -->
	<!-- 底部 -->
	<footer class="footer">
		<div class="container">
			<p class="fttext">文中出现的商标及图像版权属于其合法持有人，只供传递信息之用，非商务用途。互动交流时请遵守理性，宽容，换位思考的原则。</p>
			<p>基于HTML+CSS+JavaScript+Bootstrap3.3.7+jQuery1.11.1</p>
			<p>Copyright &copy; 2018-2018 By子成君</p>
		</div>
	</footer>
	<!-- 底部 -->
	<!-- 齿轮加载 -->
	<div  id="loading" class="colorful_loading_frame" >
  <div class="loader_overlay"></div>
  <div class="loader_cogs">
    <div class="loader_cogs__top">
      <div class="top_part"></div>
      <div class="top_part"></div>
      <div class="top_part"></div>
      <div class="top_hole"></div>
    </div>
    <div class="loader_cogs__left">
      <div class="left_part"></div>
      <div class="left_part"></div>
      <div class="left_part"></div>
      <div class="left_hole"></div>
    </div>
    <div class="loader_cogs__bottom">
      <div class="bottom_part"></div>
      <div class="bottom_part"></div>
      <div class="bottom_part"></div>
      <div class="bottom_hole"></div>
    </div>
  </div>
</div>	
	<!-- 齿轮加载 -->
	<script>
   //ajax获取zcjun.com数据
  $.ajax({
  	url:"data/articleLists.json",
  	type:"get",
  	async: true,
  	beforeSend: function (){
  		$("#loading").show()
  	}
  }).then(res=>{
  	// let jsonObj=JSON.parse(res)
  	// let data = jsonObj.data
	let data =res.data
  	$("#loading").hide()
  	for(let [key,article] of data.entries()){		
  	//判断一页最多7篇文章
  	if(key<8){
  		$(".articles").append(`
  				<li><article>
						<div class="indexwen" style>
							<div class="page-header">
								<h2 title="文章标题"><a href="details.html" style="white-space: nowrap;text-overflow:ellipsis;overflow: hidden;maxWidth =840px;display:block;">${article.title}</a></h2>
							</div>
							<div class="col-xs-6 col-md-3">
								<a href="details.html" class="thumbnail">
									<img src="img/random/tb${key+1}.jpg" alt="...">
								</a>
							</div>
							<span>文章摘要-这是第一款适用于自媒体、极客的博客主题 它提供多样化的文章分类样式，内置了许多个性化的功能，能够满足您的各种需求。 特色 适用所有设备。文章摘要-这是第一款适用于自媒体、极客的博客主题 它提供多样化的文章分类样式，内置了许多个性化的功能，能够满足您的各种需求。 特色 适用所有设备。</span>
							<p>
								<em class="glyphicon glyphicon-user"></em>
								作者：${article.nickname} 
								<em class="glyphicon glyphicon-time"></em>
								时间：${article.date}
								<em class="glyphicon glyphicon-tasks"></em>
								心情日志
								<em class="glyphicon glyphicon-eye-open"></em>
								${article.views}人围观
							</p>
							<i class="dv"></i>
						</div>
					</article></li>
  		`)
  	}
  	}
  },err=>console.log(err))


		
</script>
<iframe class="mip" style="display: none; position: absolute;top: 0;left: 0;bottom: 0;right: 0;width: 100%;height: 100%;z-index: 99;" src="m.html" frameborder="0"></iframe>
</body>
</html>